<include file="Public:head_nosearch" />
<style>
    .top{ height:54px; line-height:54px; background:#fe6430; width:100%;}
    .topl{float: left; width: 40px;}
    .f{ float:left; overflow:hidden;}
    .r{ float:right; overflow:hidden;}
    .xi12{ font-size:12px;}
    .xi13{ font-size:13px;}
    .xi14{ font-size:14px;}
    .xi15{ font-size:15px;}
    .xi16{ font-size:16px;}
    .xi17{ font-size:17px;}
    .xi18{ font-size:18px;}
    .xi19{ font-size:19px;}
    .xi20{ font-size:20px;}
    .xi21{ font-size:21px;}
    .xi22{ font-size:26px;}
    .xi23{ font-size:23px;}
    .xi24{ font-size:24px;}
    .xi30{ font-size:30px;}
    .xi26{ font-size:26px;}
    .con3{ background:#fff; margin-bottom:6px; box-sizing:border-box; padding:0 6px}
    .report-num-item{ text-align: center;}
    .report-num-item a{ color: #666;}
    .report-num-item p{ font-size: 26px; color: #999;}
    .con3t{ border-bottom:1px solid #e8e8e8; height:48px; line-height:48px;}
    .con3trs{ width:128px; height:34px; line-height:34px; border:2px solid #fa0000; border-radius:34px; color:#fa0000; margin-top:18px}
    .con3f li{ float:left; width:25%; text-align:center; line-height:46px; padding-top:14px; padding-bottom:6px;}
    .con1r{ text-align:right; line-height:36px; padding-top:10px}
    .bai,.bai a{ color:#FFFFFF;}
    .hong,.hong a{ color:#ff0000;}
    .huang,.huang a{ color:#faaf19;}
    .lan,.lan a{ color:#2293d1;}
    .lv,.lv a{ color:#2293d1;}
    .hui,.hui a{color:#909090;}
    .mgz{ margin:0 auto;overflow:hidden; width:100%;}
    .mg{ margin:0 auto; overflow:hidden; width:100%;}
    .mg2{ margin:0 auto;overflow:hidden;}
    .cen{ text-align:center;}
    .con1{ background:url(/Public/static/wap/images/icon/user-bg.png?1) center 0 no-repeat; /* height:184px;*/  height:160px; box-sizing:border-box; padding:46px 24px 0px 26px;}
    .con1l{ width:88px; height:88px; border-radius:50%}
    .con1m{ margin-left:16px}
    .con1mt{ padding-top:10px; padding-bottom:10px;}
    .con1mf{ width:112px; height:27px; line-height:22px; border:2px solid #ffbd31; border-radius:34px}
    .con1r{ text-align:right; line-height:36px; padding-top:10px}
    .con2{ background:#fff; padding:4px 0px; margin-bottom:10px;}
    .cons2{ background:#fff; padding:4px 0px; margin-bottom:10px;}
    .con2 li{ float:left; width:49%; height:74px; border-right:1px solid #e9e9e9; line-height:32px; padding-top:4px; text-align:center}
    .cons2 li{ float:left; width:33%; height:74px; border-right:1px solid #e9e9e9; line-height:32px; padding-top:4px; text-align:center}
    .con2 li:last-child{ border-right:none}
    .canvas-code2 {width: 108px;height: 108px;margin-top: -266px;margin-left: 83px; -webkit-transform: translateZ(1px);transform: translateZ(1px);
</style>
<main>
    <div style="height:0px;overflow:hidden;z-index: -1; top: 0;">
        <div class="canvas-mask" style="height: 461px; width: 300px;">
            <div class="canvas-container">
                <div class="canvas-wrap">
                    <div class="canvas-pics">
                        <img src="__STATIC__/wap/images/haibao.png" class="canvas-pic" />
                        <img src="{:U('user/qrcode')}" class="canvas-code2"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="save">
        <div class="savemask">
            <div class="savewrap">
                <div class="saveline">
                    <img src="__STATIC__/wap/images/icon/icon-thumb.png" class="icon-thumb"/>
                    <p class="f-21 c-white savecopy">长按虚线区域可以<br/>保存图片或分享给好友</p>
                    <img src="__STATIC__/wap/images/icon/icon-wire.png" class="icon-wire"/>
                </div>
            </div>
        </div>
    </div>
</main>
<tqkjs href="__STATIC__/wap/js/jquery.min.js,__STATIC__/wap/js/amazeui.min.js,__STATIC__/wap/js/jquery.form.min.js,__STATIC__/wap/js/clipboard.min.js,__STATIC__/wap/js/jquery.validate.js,__STATIC__/wap/js/validate-methods.js,__STATIC__/wap/layer/layer.js,__STATIC__/wap/js/html2canvas.js"/>
    <include file="Public:stat" />
<script language="JavaScript">

    var copycodes = new ClipboardJS(".copycodes", {
        text: function() {
            return "{$invicode?$invicode:$user.invocode}";
        }
    });

    copycodes.on('success', function(e) {
        layer.msg('成功复制邀请码！', {time:2000});
    });

    function $$(selector) {
        return document.querySelector(selector);
    }

    var main = {
        init:function(){
            main.setListener();
        },
        setListener:function(){
            $(".saveline").width($(".canvas-wrap").width());
            $(".saveline").height($(".canvas-wrap").height());
            main.html2Canvas();
        },
        getPixelRatio:function(context){
            let backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        html2Canvas: function () {
            var shareContent = $$(".canvas-mask");
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            width=300;
            height=461;
            offsetTop=0;
            scaleBy=2;
            canvas.width = width * scaleBy;
            canvas.height = (height + offsetTop) * scaleBy;
            context.scale(scaleBy, scaleBy);
            var opts = {
                allowTaint:false,
                useCORS:true,
                tainttest:true,
                scale:scaleBy,
                canvas:canvas,
                logging: false,
                width:width,
                height:height
            };
            html2canvas(shareContent, opts).then(function (canvas) {
                var dataUrl = canvas.toDataURL("image/png");
                var html = '<div class="canvas-mask" style="width:300px;height:461px;">'+
                    '<img crossOrigin="anonymous" width="300" src="'+dataUrl+'" class="kele-shared-modal">'+
                    '</div>'+
                    '<div class="canvas-nav">'+
                    '<ul class="am-avg-sm-2">'+
                    '<li class="nav-violet"><a href="javascript:;" id="canvasCopy"><i class="iconfont icon-wenjianxinxi"></i>复制推广链接</a></li>'+
                    '<li class="nav-green"><a href="javascript:;" id="canvasSave"><i class="iconfont icon-baocun"></i>保存图片</a></li>'+
                    '</ul>'+
                    '</div>';
                layer.closeAll();
                layer.open({
                    type: 1,
                    title: false,
                    area: '100%',
                    shadeClose:true,
                    closeBtn: 0,
                    scrollbar: false,
                    fixed: true,
                    content: html,
                    skin:'canvas-layer',
                    success: function(){
                        $("html,body").addClass("lock")
                        $("#canvasClose").on("click",function(){
                            layer.closeAll();
                        });
                        $(".canvas-mask").on("click",function(e){
                            let target  = $(e.target);
                            if(target.closest(".kele-shared-modal").length == 0){
                                layer.closeAll();
                            }
                            e.stopPropagation();
                        })
                    },
                    end: function(){
                        $("html,body").removeClass("lock")
                    }
                });
                $("#canvasSave").on("click",function(){
                    let canvasSaveLayer = layer.open({
                        type: 1,
                        title: false,
                        area: '100%',
                        offset: '0px',
                        shadeClose:true,
                        closeBtn: 0,
                        scrollbar: false,
                        fixed: true,
                        content: $(".save"),
                        skin:'save-layer',
                        success: function(){
                            $("html,body").addClass("lock");
                            $(".save-layer").on("click",function(){
                                layer.close(canvasSaveLayer);
                            })
                        }
                    });
                })
                let clipboard = new ClipboardJS("#canvasCopy", {
                    text: function() {
                        return "{:C('yh_site_url')}/?t={$r}";
                    }
                });
                $("#canvasCopy").on("click",function(){
                    layer.msg('复制成功',{time:1000});
                })

            });
        }
    };
    main.init();
</script>


</body></html>

